<template>
  <div class="container">
    <div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位名称" prop="name">
                <el-input v-model="appendlist.name" placeholder="岗位名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名称英文" prop="nameEn">
                <el-input v-model="appendlist.nameEn" onKeyUp="value=value.replace(/[\W]/g,'')" placeholder="用户名称英文"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位简称" prop="shortName">
                <el-input v-model="appendlist.shortName" placeholder="岗位简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位编码" prop="code">
                <el-input v-model="appendlist.code" placeholder="岗位编码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位类型" prop="type">
                <el-input v-model="appendlist.type" placeholder="岗位类型"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位等级" prop="grade">
                <el-input v-model="appendlist.grade" placeholder="岗位等级"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否内建岗位" prop="innerFlag">
                <el-select v-model="appendlist.innerFlag" clearable placeholder="是否内建岗位">
                  <el-option
                    v-for="item in innerFlagOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位状态" prop="status">
                <el-select v-model="appendlist.status" clearable placeholder="岗位状态">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位描述" prop="remarks">
                <el-input type="textarea" v-model="appendlist.remarks" placeholder="岗位描述"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
        </el-form>

      </div>
      <div class="menu-navbar">
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">保 存</el-button>
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['sysDutyData'],
    data() {
      return {
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        innerFlagOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        appendlist: {
          'orgId': '',
          'name': '',
          'nameEn': '',
          'shortName': '',
          'code': '',
          'type': '',
          'grade': '',
          'remarks': '',
          'innerFlag': '',
          'status': ''
        },
        appendrules: {
          name: [
            { message: '标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          nameEn: [
            { message: '用户名称英文不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          code: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          type: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          grade: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          remarks: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          innerFlag: [
            { required: false, trigger: 'blur' }
          ],
          status: [
            { required: false, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      appendData() {
        this.appendlist.orgId = this.sysDutyData.orgId
        this.$store.dispatch('SysGroupInsert', this.appendlist).then(res => {
          // this.$router.push({
          //   path: 'sysDuty/' + this.sysDutyData.orgId
          // })
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$emit('changeCloseDialog')
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.appendData()
          } else {
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelSubmit() {
        this.$emit('changeCloseDialog')
        // this.$router.push({
        //   path: 'sysDuty/' + this.sysDutyData.orgId
        // })
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
